<template>
  <div class="flex flex-y-center flex-x-flex-end h-100">
    <el-tooltip trigger="hover" placement="bottom" content="复制首页地址">
      <div class="flex flex-center pointer mx-4" @click="copyHomeUrl">
        <AppIcons icon="LinkOutlined" :size="20" />
      </div>
    </el-tooltip>
    <el-tooltip trigger="hover" placement="bottom" content="打开首页">
      <div class="flex flex-center pointer mx-4" @click="openHome">
        <AppIcons icon="DesktopOutlined" :size="20" />
      </div>
    </el-tooltip>
    <el-tooltip trigger="hover" placement="bottom" content="复制商户登录地址">
      <div class="flex flex-center pointer mx-4" @click="copyMchUrl">
        <AppIcons icon="LinkOutlined" :size="20" />
      </div>
    </el-tooltip>
    <el-tooltip trigger="hover" placement="bottom" content="打开商户登录">
      <div class="flex flex-center pointer mx-4" @click="openMch">
        <AppIcons icon="ShopOutlined" :size="20" />
      </div>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
    getHomeUrl() {
      if (!this.$siteApp.siteInfo.domain) {
        return "请先配置落地域名";
      }
      this.moudelName = globalThis.location.pathname.replace(/^\/(.*)\/$/, '$1');
      const appid = localStorage.getItem(this.moudelName + '_appid');
      if (!appid) {
        throw new Error("获取应用id失败");
      }
      return this.$siteApp.siteInfo.domain + '/app/ycMassage/#/?appid=' + appid;
    },
    copyHomeUrl() {
        const copyText = this.getHomeUrl();
        this.setClipboard(copyText);
    },
    openHome() {
      try {
        const url = this.getHomeUrl();
        window.open(url);
      } catch (error) {
        return this.$useMessage(error.message, 'error');
      }
    },
    getMchUrl() {
      this.moudelName = globalThis.location.pathname.replace(/^\/(.*)\/$/, '$1');
      const appid = localStorage.getItem(this.moudelName + '_appid');
      if (!appid) {
        throw new Error("获取应用id失败");
      }
      return window.location.origin + '/app/ycMassage/shop/#/?appid=' + appid;
    },
    copyMchUrl() {
        const copyText = this.getMchUrl();
        this.setClipboard(copyText);
    },
    openMch() {
      try {
        const url = this.getMchUrl();
        window.open(url);
      } catch (error) {
        return this.$useMessage(error.message, 'error');
      }
    },
    setClipboard(text) {
      if (navigator.clipboard && globalThis.isSecureContext) {
          navigator.clipboard.writeText(text).then(_ => {
            this.$useMessage('已复制', 'success');
          })
      } else {
          let input = document.createElement('input');
          input.value = text;
          document.body.appendChild(input);
          input.select();
          document.execCommand('Copy');
          input.remove();
          this.$useMessage('已复制', 'success');
      }
  }
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}

.h-100{
    height:100%;
}

.flex-y-center{
    align-items: center;
}
.flex-x-flex-end{
    justify-content:flex-end;
}
.flex-center {
    justify-content: center;
    align-items: center;
    height: 100%;
}
.pointer {
  cursor: pointer;
}

.ml-4
,.mx-4 {
  margin-left: 10px;
}

.mr-4
,.mx-4 {
  margin-right: 10px;
}
</style>